<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>

  <div class="flex items-center justify-center bg-gray-100">
    <div class="p-6 bg-white rounded-lg shadow-lg">
      <h1 class="text-2xl font-bold text-gray-800">Hello Tailwind CSS!</h1>
      <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet.</p>
      <button class="px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-600">
        Click me!
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{ msg: string }>()

const count = ref(0)
console.log('tag', '1234')
</script>

<style scoped lang="less"></style>
